<template>
  <div id="userRegisterPage">
    <div class="register-container">
      <h2 class="artistic-title">用户注册</h2>
      <a-form
        class="register-form"
        label-align="left"
        auto-label-width
        :model="form"
        @submit="handleSubmit"
      >
        <a-form-item field="userAccount" label="账号">
          <a-input
            v-model="form.userAccount"
            placeholder="请输入账号"
            prefix-icon="icon-user"
            class="input-field"
          />
        </a-form-item>
        <a-form-item
          field="userPassword"
          tooltip="密码不少于 8 位"
          label="密码"
        >
          <a-input-password
            v-model="form.userPassword"
            placeholder="请输入密码"
            prefix-icon="icon-lock"
            class="input-field"
          />
        </a-form-item>
        <a-form-item
          field="checkPassword"
          tooltip="密码不少于 8 位"
          label="确认密码"
        >
          <a-input-password
            v-model="form.checkPassword"
            placeholder="请再次输入密码"
            prefix-icon="icon-lock"
            class="input-field"
          />
        </a-form-item>
        <a-form-item class="form-buttons">
          <a-button type="primary" html-type="submit" class="register-button">
            注册
          </a-button>
        </a-form-item>
        <a-form-item class="login-link">
          已有账号？<a href="/user/login">点击登录</a>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { userRegisterUsingPost } from "@/api/userController";
import API from "@/api";

/**
 * 表单信息
 */
const form = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
} as API.UserRegisterRequest);

const router = useRouter();

/**
 * 提交表单
 */
const handleSubmit = async () => {
  const res = await userRegisterUsingPost(form);
  if (res.data.code === 0) {
    message.success("注册成功");
    await router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    message.error(res.data.message + "注册失败");
  }
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");

#userRegisterPage {
  display: flex;
  align-items: flex-start; /* 使内容对齐到顶部 */
  justify-content: center;
  height: 100vh;
  padding-top: 10vh; /* 添加顶部内边距，确保内容不紧贴顶部 */
}

.register-container {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.artistic-title {
  margin-bottom: 24px;
  color: #333;
  font-size: 36px;
  font-family: "Pacifico", cursive;
}

.register-form {
  width: 100%;
}

.input-field {
  border-radius: 8px;
}

.input-field:focus-within {
  border-color: #6b73ff !important;
  box-shadow: 0 0 0 2px rgba(107, 115, 255, 0.2) !important;
}

.form-buttons {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.register-button {
  width: 100%;
  border-radius: 8px;
}

.login-link {
  margin-top: 16px;
  text-align: center;
}

.login-link a {
  color: #6b73ff;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}
</style>
